<template>
  <div>
    <h1>{{type123}}{{count}}{{count2}}</h1>
    <h2>{{name}}---{{$store.state.user.age}}</h2>
    <button @click='add'>+</button>
    <input
      type="text"
      v-model='name'
    >
  </div>
</template>
<script>
// @ is an alias to /src
import { CHANGECOUNT } from "./store/types";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
/* 
mapState
mapGetters这两个辅助函数 是用来帮助我们把vuex中的state中的数据或者getter中的数据
  变成本组件自己的数据,一般都是在计算属性中使用

mapMutations
mapActions 这两个辅助函数 是用来帮助我们把vuex中mutations和actions中的方法
  变成本组件自己的方法  


*/

export default {
  name: "XXX",
  data() {
    return {};
  },
  methods: {
    ...mapMutations("user", ["changeName"]),
    add() {
      // this.$store.commit(CHANGECOUNT, 5);
      this.$store.dispatch(CHANGECOUNT, 5);
      // this.changeName(99999);
    },
  },
  computed: {
    // count() {
    //   return this.$store.state.count;
    // },
    ...mapState(["count", "count2"]),
    // type123() {
    //   return this.$store.getters.type;
    // },
    ...mapGetters({
      type123: "type",
    }),
    name: {
      get() {
        return this.$store.state.user.name;
      },
      set(val) {
        // this.$store.commit("user/changeName", val);
        this.changeName(val);
      },
    },
  },
  components: {},
};
</script>
<style lang="less">
</style>